<template>
    <view class="all">
        <view class="search-box">
            <view class="ipt">
                <text class="iconfont icon-sousuo"></text>
                <input
                    type="text"
                    placeholder="搜索商品"
                />
            </view>
        </view>

        <view class="classify">
            <view class="classifyBox">
                <view class="c-l">
                    <view
                        v-for="(item, idx) in navArrList"
                        class="li"
                        :class="{ active: slectIdx == idx }"
                        :key="idx"
                        @click="slectIdxFunc(idx)"
                    >
                        <view class="p">
                            <text>{{ item.classifyName }}</text>
                        </view>
                    </view>
                </view>
                <view class="c-r">
                    <!-- <button @click="initPage">点击</button> -->
                    <!-- //推荐 -->
                    <view
                        v-for="(mo, moIdx) in contentArr"
                        :key="moIdx"
                        class="r-box"
                    >
                        <view class="p tit">{{ mo.classifyName }}</view>
                        <div class="goods-imgs">
                            <div
                                class="goods-imgs-item"
                                v-for="(item, idx) in mo.treeVoList"
                                :key="item.id"
                                @click.stop="chooseTypeFunc(item)"
                            >
                                <div class="imgBox">
                                    <img
                                        :src="$getImg(item.pic)"
                                        class="imgs no-check"
                                        mode="aspectFit"
                                    />
                                </div>

                                <span>{{ item.classifyName }}</span>
                            </div>
                        </div>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    const app = getApp();
    import { CateList, CateTree } from '@/api/http';
    export default {
        mixins: [],
        data() {
            return {
                slectIdx: 1,

                navArrList: [],
                contentArr: []
            };
        },
        // 事件处理函数
        onShow() {},
        onLoad() {
            this.initPage();
        },
        methods: {
            initPage() {
                console.log('111111111111111222222222222222222222222222222');

                CateTree({}).then(res => {
                    this.navArrList = res.data ? res.data[0].treeVoList : [];

                    this.contentArr = this.navArrList[this.slectIdx]?.treeVoList;

                    // console.log('111111111111111', res.data [0] )
                });
            },
            goto(row) {
                console.log('这里出差了么', row);

                let tit = row.titile;

                // if(tit.includes( '商标智能注册')){
                //     uni.navigateTo({
                //         url: '/pages/productsmart/index'
                //     });
                //     return
                // }

                // if(tit.includes( '商标顾问注册')){
                //     uni.navigateTo({
                //         url: '/pages/product/index'
                //     });
                //     return
                // }

                uni.navigateTo({
                    url: '/pages/leavemsg/index?name=' + tit
                });
            },

            slectIdxFunc(e) {
                this.slectIdx = e;
                this.contentArr = this.navArrList[e]?.treeVoList;
            },
            chooseTypeFunc() {}
        }
    };
</script>

<style scoped lang="scss">
    $mainColor: #e7757d;
    view {
        box-sizing: border-box;
    }

    .classify {
        font-size: 12px;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        background-color: #f6f6f6;
        height: 90vh;
    }
    .search-box {
        height: 10vh;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 15px;
        .ipt {
            height: 38px;
            padding: 2px 10px;
            border: 1px solid $mainColor;
            border-radius: 20px;
            width: 60%;
            display: flex;
            align-items: center;
            .iconfont {
                font-size: 24px;
                color: $mainColor;
            }
            input {
                height: 100%;
                padding: 0 10px;
                display: flex;
                align-items: center;
                color: #888;
                font-size: 14px;
            }
        }
    }

    .classifyBox {
        float: left;
        height: 100%;
        background: #f6f6f6;
        width: 100%;
        overflow: hidden;
    }
    .classifyBox .c-l {
        float: left;
        width: 20%;
        height: 100%;
        overflow-y: auto;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;
    }
    .classifyBox .c-l::-webkit-scrollbar {
        width: 0px;
        overflow: hidden;
    }
    .classifyBox .c-l .li {
        position: relative;
        height: 64px;
        line-height: 1.5;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        .p {
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        &::before {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            width: 8rpx;
            height: 60%;
            transform: translateY(-50%);
            background: transparent;
            border-radius: 8px;
        }
    }

    .classifyBox .c-l .li.active {
        background: #f6f6f6;
        &::before {
            background: $mainColor;
        }
        .p {
            font-size: 30rpx;
            font-weight: bold;
            color: $mainColor;
        }
        .p::before,
        .p::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            right: 0;
        }

        .p::before {
            top: -10px;
        }
        .p::after {
            bottom: 0px;
            bottom: -10px;
            transform: rotate(180deg);
        }
        .p::before {
            background: radial-gradient(circle at 0 0, transparent 10px, #f6f6f6 10px);
        }
        .p::after {
            background: radial-gradient(circle at 100% 0px, transparent 10px,#f6f6f6 10px)
        }
    }

    .classifyBox .c-r {
        float: left;
        width: 80%;
        height: 100%;
        overflow-y: auto;
        /* background: #f5f5f5; */
        padding: 10px 12px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;

        .tit {
            font-size: 16px;
            font-weight: bolder;
            padding: 14px 0 20px;
        }

        .goods-imgs {
            display: flex;
            flex-wrap: wrap;
            padding: 0px 10px 0px;
            .goods-imgs-item {
                text-align: center;
                margin-bottom: 20px;
                width: 33.33%;
                color: #666;
                font-size: 15px;
                .imgBox {
                    margin: 0 auto 10px;
                    width: 66px;
                    height: 66px;
                    line-height: 66px;
                    .imgs {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                &.active {
                    .check {
                        display: block;
                    }
                    .no-check {
                        display: none;
                    }
                }
            }
        }
    }
    .classifyBox .c-r::-webkit-scrollbar {
        width: 0px;
        overflow: hidden;
    }
</style>
